<template>
    <h2>欢迎LTX体检健康管理系统</h2>
    <div class="formw">
        <el-form :model="form">
            <h1>医生登录</h1>
            <el-form-item>
                <el-input placeholder="请输入编号" prefix-icon="User" class="input-item" v-model="doctor.doccode" />
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入密码" prefix-icon="Lock" show-password class="input-item"
                    v-model="doctor.password" />
            </el-form-item>
            <el-form-item>
                <el-button class="login" @click="toindex">登录</el-button>
            </el-form-item>
            <p>没有账号？
                <el-link type="primary" href="">
                    立即注册
                </el-link>
            </p>
        </el-form>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue';
import axios from '../router/axios';
import {setSessionStorage} from '../router/common'
// import router from '@/router';
import { useRouter } from "vue-router";
export default {
    setup() {
        const router = useRouter();
        const state = reactive({
            doctor: {
                doccode: 'zzj',
                password: '123456'
            }
        })
        function toindex() {
            axios.post('api/doctor/login', {
                doccode: state.doctor.doccode,
                password: state.doctor.password
            })
                .then(function (response) {
                    const result = response.data;
                    console.log(result.data.token);
                    if (result.code == 1) {
                        alert("登录成功");
                        setSessionStorage('token', result.data.token);
                        setSessionStorage("doctor", result.data.doctor);
                        router.push("/orderlist")
                    } else {
                        alert(response.data.msg);
                        state.doctor.doccode = "",
                        state.doctor.password = "";
                    }
                })
                .catch(function (error) {
                    // 错误处理
                    console.log(error);
                })
                .finally(function () {
                    // 总是执行
                });
        }
        // function toindex() {
        //     router.push('/orderlist')
        // }

        return {
            ...toRefs(state),
            toindex
        }
    }
}
</script>
<style scoped>
h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 36px;
    color: #2c3e50;
    font-weight: 500;
}

.formw {
    background: linear-gradient(135deg, rgba(6, 121, 121, 0.8), rgba(6, 121, 121, 0.6));
    position: fixed;
    right: 260px;
    top: 150px;
    max-width: 400px;
    max-height: 400px;
    width: 100%;
    height: 100%;
    display: flex;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.formw:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.input-item {
    transition: all 0.3s;
}

.input-item:hover {
    transform: translateY(-2px);
}

.formw .el-form {
    margin: auto;
    max-width: 600px;
    padding: 20px;
}

h1 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 36px;
    color: #fff;
}

.login {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #336ca8, #67c23a);
    color: #fff;
    border: none;
    transition: all 0.3s;
}

.login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

p {
    color: #fff;
    text-align: center;
    margin-top: 15px;
}
</style>